<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="handleCancel"
    @ok="handleOk"
    :confirmLoading="isSubmiting"
    title="人均收入"
  >
    <a-form :form="form" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
      <a-form-item label="异动编号">
        <a-input disabled v-decorator="['ApplyNo']" placeholder="请输入异动编号"> </a-input>
      </a-form-item>
      <a-form-item label="申请人">
        <a-input disabled v-decorator="['Proposer']" placeholder="请输入申请人"> </a-input>
      </a-form-item>
      <a-form-item label="身份证号">
        <a-input disabled v-decorator="['IDCard']" placeholder="请输入身份证号"> </a-input>
      </a-form-item>
      <a-form-item label="异动原因">
        <a-textarea
          v-decorator="['YdReason', { rules: [{ required: true, message: '请输入异动原因' }] }]"
          placeholder="请输入异动原因"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { yearPicker } from '@/components'
import { postYdsb } from '@/api/common'
import pick from 'lodash.pick'
export default {
  components: {
    yearPicker
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'plan' }),
      isSubmiting: false
    }
  },
  methods: {
    fetchData () {
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.data, ['ApplyNo', 'Proposer', 'IDCard', 'YdReason']))
      })
    },
    close () {
      this.form.resetFields()
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.isSubmiting = true
          postYdsb({
            State: 'Alter',
            ydsb: {
              ID: this.data.ID,
              State: 'Alter',
              YdReason: values.YdReason
            }
          }).then((res) => {
            this.$message.success('异动修改成功')
            this.close()
            this.$emit('change')
          }).finally(() => {
             this.isSubmiting = false
          })
        }
      })
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="less" scoped>
</style>
